<template>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe685;</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe616;</span>
      输入城市、景点
    </div>
    <div class="header-right">
      城市
      <span class="iconfont arrow-icon">&#xe60a;</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeHeader'
}
</script>

<style lang="stylus" scoped>
  @import " '~styles/varibles.styl"
  .header
     display: flex
     height: 1.86rem
     background $bgColor
     color #fff
  .header-left
     width: 2.25rem
     float: left
    .back-icon
     text-align: center
     font-size: .4rem
  .header-input
     flex: 1
     height: 1.64rem
     line-height: 1.64rem
     margin-top: .12rem
     margin-left: .2rem
     border-radius: .1rem
     padding-left: .2rem
     background: #fff
     color: #ccc
  .header-right
     width: 3.64rem
     float: right
     text-align: center
  .arrow-icon
     margin-left: 0.04rem
     font-size: .24rem
</style>
